body {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  flex-direction: column;
  .origin-image{
    margin-bottom: 10px;  
  }

  .matrix {
    --img-w: 800px;
    --img-h: 600px;
    --ear-size: 10px;
    position: relative;
    width: var(--img-w);
    height: var(--img-h);
    box-shadow: 0 0 0 3px salmon;

    // display: grid;
    // grid-template-columns: repeat(4, var(--piece-w));
    // grid-template-rows: repeat(4, var(--piece-h));

    .piece {

      width: var(--piece-size);
      height: var(--piece-size);
      position: absolute;
      background-image: url(../public/ff13.jpg);
      background-size: var(--img-w) var(--img-h);
      background-repeat: no-repeat;
      background-position: var(--x, 0) var(--y, 0);
      // box-shadow: 0 0 0 2px inset orange;
      opacity: 0.9;
      transform-origin: center center;

      --ear-size-inset: calc(100% - var(--ear-size));
      --ear-start: calc(50% - var(--ear-size));
      --ear-end: calc(50% + var(--ear-size));

      transition: opacity ease 0.5s;

      &:hover{
        opacity:1;
      }
      
      &.selected {
        filter: brightness(0.5);
        z-index:10;
      }
      &.vertical {
        // vertical
        --h: calc(var(--piece-size) + calc(2 * var(--ear-size)));
        height: var(--h);
        --ear-top: var(--ear-start) var(--ear-size), 50% 0%, var(--ear-end) var(--ear-size);
        --ear-right: 100% var(--ear-start), var(--ear-size-inset) 50%, 100% var(--ear-end);
        --ear-bottom: var(--ear-end) var(--ear-size-inset), 50% 100%, var(--ear-start) var(--ear-size-inset);
        --ear-left: 0 var(--ear-end), var(--ear-size) 50%, 0 var(--ear-start);

        clip-path: polygon(0 var(--ear-size), var(--ear-top), 100% var(--ear-size),
            100% var(--ear-size), var(--ear-right), 100% var(--ear-size-inset),
            100% var(--ear-size-inset), var(--ear-bottom), 0 var(--ear-size-inset),
            0 var(--ear-size-inset), var(--ear-left), 0 var(--ear-size));


        &.edge-top {
          --ear-top: 0 var(--ear-size);
        }

        &.edge-right {
          --ear-right: 100% var(--ear-size);
        }

        &.edge-bottom {
          --ear-bottom: 100% var(--ear-size-inset);
        }

        &.edge-left {
          --ear-left: 0 var(--ear-size-inset);
        }



      }

      &.horizontal {
        // horizontal
        --w: calc(var(--piece-size) + calc(2 * var(--ear-size)));
        --ear-top: var(--ear-start) 0, 50% var(--ear-size), var(--ear-end) 0;
        --ear-right: var(--ear-size-inset) var(--ear-start), 100% 50%, var(--ear-size-inset) var(--ear-end);
        --ear-bottom: var(--ear-end) 100%, 50% var(--ear-size-inset), var(--ear-start) 100%;
        --ear-left: var(--ear-size) var(--ear-end), 0% 50%, var(--ear-size) var(--ear-start) ;

        width: var(--w);
        clip-path: polygon(var(--ear-size) 0, var(--ear-top), var(--ear-size-inset) 0,
            var(--ear-size-inset) 0, var(--ear-right), var(--ear-size-inset) 100%,
            var(--ear-size-inset) 100%, var(--ear-bottom), var(--ear-size) 100%,
            var(--ear-size) 100%, var(--ear-left), var(--ear-size) 0
          );

        &.edge-top {
          --ear-top: var(--ear-size) 0;
        }

        &.edge-right {
          --ear-right: var(--ear-size-inset) 0;
        }

        &.edge-bottom {
          --ear-bottom: var(--ear-size-inset) 100%;
        }

        &.edge-left {
          --ear-left: var(--ear-size) 100%;
        }
      }

      // &::before {
      //   content: '';
      //   // background-image: repeating-linear-gradient(45deg, #fff, #fff 10%, #000 10%, #000 20%);
      //   // background-clip: polygon();
      //   // clip-path: polygon(0 0,45% 0, 50% 5%, 52% 0, 100% 0, 100% 100%,0 100%);
      //   position: absolute;
      //   inset: 0;
      //   mix-blend-mode: lighten;
      // }

    }
  }

}